<template>
  <el-container>
    <!--    左侧-->
    <el-aside :width="showMenuFlag ? '64px' : '200px' ">
      <div>
        <div class="menuTitle">@动力云客管理系统</div>
        <!--        <el-col :span="12">-->
        <el-col>
          <el-menu
              active-text-color="#ffd04b"
              background-color="#334157"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              :unique-opened="true"
              :collapse="showMenuFlag"
              :collapse-transition="false"
              :router="true"
          >
            <!--              collapse-transition表示是否开启折叠动画：false表示关闭动画-->
            <!--            市场活动菜单-->
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>市场活动</span>
              </template>
              <el-menu-item index="1-1">
                <el-icon>
                  <MessageBox/>
                </el-icon>
                市场活动
              </el-menu-item>
              <el-menu-item index="1-2">
                <el-icon>
                  <Histogram/>
                </el-icon>
                市场统计
              </el-menu-item>
            </el-sub-menu>

            <!--            系统管理菜单-->
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Grid/>
                </el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="2-1">
                <el-icon>
                  <Edit/>
                </el-icon>
                系统管理
              </el-menu-item>
            </el-sub-menu>

            <!--            字典管理菜单-->
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <Menu/>
                </el-icon>
                <span>字典管理</span>
              </template>
              <el-menu-item index="3-1">
                <el-icon>
                  <Grid/>
                </el-icon>
                字典管理
              </el-menu-item>

            </el-sub-menu>

            <!--            用户管理菜单-->
            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/dashboard/user">
                <el-icon>
                  <UserFilled/>
                </el-icon>
                用户管理
              </el-menu-item>

            </el-sub-menu>

            <!--            客户管理菜单-->
            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <UserFilled/>
                </el-icon>
                <span>客户管理</span>
              </template>
              <el-menu-item index="5-1">
                <el-icon>
                  <Avatar/>
                </el-icon>
                客户管理
              </el-menu-item>
            </el-sub-menu>

            <!--            交易管理菜单-->
            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <PieChart/>
                </el-icon>
                <span>交易管理</span>
              </template>
              <el-menu-item index="6-1">
                <el-icon>
                  <Filter/>
                </el-icon>
                交易管理
              </el-menu-item>

            </el-sub-menu>

            <!--            市场活动菜单-->
            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <HelpFilled/>
                </el-icon>
                <span>线索管理</span>
              </template>
              <el-menu-item index="7-1">
                <el-icon>
                  <Share/>
                </el-icon>
                线索管理
              </el-menu-item>
              <el-menu-item index="7-1">
                <el-icon>
                  <HelpFilled/>
                </el-icon>
                线索统计
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </div>
    </el-aside>

    <!--    右侧-->
    <el-container class="rightContent">
      <!--      右上-->
      <el-header>
        <!--        展开与折叠图标展示-->
        <el-icon v-if="showMenuFlag" class="expandCollapse" @click="showMenu">
          <Expand/>
        </el-icon>
        <el-icon v-else class="expandCollapse" @click="showMenu">
          <Fold/>
        </el-icon>

        <!--        下拉菜单-->
        <el-dropdown class="dropDownMenu" hide-on-click="false">
          <span class="el-dropdown-link">
            {{user.name}}
            <el-icon class="el-icon--right">
              <arrow-down/>
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!--      右中-->
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>

      <!--      右下-->
      <el-footer>动力节点，版权所有，侵权必究</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {doGet} from "../http/HttpRequest.js";
import {messageConfirm, messageTip, removeToken} from "../util/util.js";
import {ElMessageBox} from "element-plus";

export default {
  name: "DashBoard",
  data() {
    return {
      // 默认取值为false，表示默认展开
      showMenuFlag: false,
      // 当前登录对象：user
      user: {},
      // 默认值为true，显示页面；若为false，则不显示页面
      isRouterAlive: true
    }
  },
  // provide函数，提供数据或者方法，具有穿透性，可提供给其下的任意级组件使用
  provide() {
    return {
      reload: () => {
        this.isRouterAlive = false;
        // 当数据变化更新了，在dom中渲染后，自动执行该函数
        this.$nextTick(() => {
          this.isRouterAlive = true;
        })
      },
      age: 49,
      user:[{id:3, name:'长'}, {id:1, name:'短'}],
    }
  },
  methods: {
    showMenu() {
      this.showMenuFlag = !this.showMenuFlag
    },
    loadLoginUser() {
      doGet("/api/login/info", {}).then(resp => {
        this.user = resp.data.data;
      })
    },
    loginOut() {
      doGet("/api/loginOut", {}).then(resp => {
        if (resp.data.code === 200) {
          removeToken();
          window.location.href="/";
          messageTip("退出登录成功", "success");
        }else {
          messageConfirm('退出登录异常，是否强制退出登录?').then(() => {
            removeToken();
            window.location.href="/";
          }).catch(err => {
            messageTip("取消登录", "warning");
          })
        }
      })
    }
  },
  mounted() {
    // 获取当前登录用户
    this.loadLoginUser();
  },

}
</script>

<style scoped>
.el-aside {
  background-color: #1a1a1a;
}

.el-header {
  background: azure;
  height: 35px;
  line-height: 35px;
//text-align: center;
}

.el-footer {
  background: azure;
  height: 35px;
  line-height: 35px;
  text-align: center;
}

.rightContent {
  height: calc(100vh);
}

.menuTitle {
  color: #f9f9f9;
  height: 35px;
  line-height: 35px;
  text-align: center;
}

.el-menu-vertical-demo {
  border-right: 0px solid var(--el-menu-border-color);
}

.expandCollapse {
  cursor: pointer;
}
.dropDownMenu {
  float: right;
  line-height: 35px;
  height: 35px;
}
</style>